<template>
    <div class="app-container">
        <el-form class="custom-form" :model="queryParams" :rules="rules" :inline="true" ref="queryRef"
            label-width="100px">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="客户名称" prop="custName">
                        <el-input v-model="queryParams.custName" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="证件类型" prop="certType">
                        <el-select v-model="queryParams.certType" placeholder="请选择" clearable>
                            <el-option v-for="dict in certTypeOption" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="证件号码" prop="certNo">
                        <el-input v-model="queryParams.certNo" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeTab" type="border-card">
            <el-tab-pane label="上下级关系" class="tab1" name="1">
                <el-row>
                    <el-col :span="16">
                        <div class="datePicker">
                            <el-date-picker v-model="dateValue" type="date" placeholder="请选择日期" />
                        </div>
                        <div style="height: 800px;width: 100%;">
                            <TreeShareholderEquity/>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="24">
                                <el-descriptions :title="custInfo.custName" :column="1" label-align="right" :border="true">
                                    <template #extra>
                                        <el-button type="primary" plain @click="visible=true">查看股东信息</el-button>
                                    </template>
                                    <el-descriptions-item label="法定代表人" width="100" label-align="right">{{ custInfo.legalRepresentative }}</el-descriptions-item>
                                    <el-descriptions-item label="企业类型" width="100" label-align="right">{{ custInfo.type }}</el-descriptions-item>
                                    <el-descriptions-item label="统一社会信用代码" width="100" label-align="right">{{ custInfo.certNo }}</el-descriptions-item>
                                    <el-descriptions-item label="注册资本" width="100" label-align="right">{{ custInfo.registeredCapital }}</el-descriptions-item>
                                    <el-descriptions-item label="成立日期" width="100" label-align="right">{{ custInfo.establishTime }}</el-descriptions-item>
                                    <el-descriptions-item label="所属行业一级" width="100" label-align="right">{{ custInfo.industryOne }}</el-descriptions-item>
                                    <el-descriptions-item label="所属行业二级" width="100" label-align="right">{{ custInfo.industryTwo }}</el-descriptions-item>
                                    <el-descriptions-item label="上级机构占股比" width="100" label-align="right">{{ custInfo.topShareholding }}</el-descriptions-item>
                                    <el-descriptions-item label="股权层级" width="100" label-align="right">{{ custInfo.equityHierarchy }}</el-descriptions-item>
                                    <el-descriptions-item label="业务归属层级" width="100" label-align="right">{{ custInfo.attributionHierarchy }}</el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                            <el-col :span="24">
                                <el-row :gutter="20" class="mt20">
                                    <el-col :span="12">
                                        <el-descriptions title="所选节点及其下属节点概况" :column="1" label-align="right"
                                            :border="true">
                                            <el-descriptions-item label="当前存在有限保单客户" width="100" label-align="right">{{ custInfo.num1 }}</el-descriptions-item>
                                            <el-descriptions-item label="客户数量" width="100" label-align="right">{{ custInfo.num2 }}</el-descriptions-item>
                                            <el-descriptions-item label="三航客户" width="100" label-align="right">{{ custInfo.num3 }}</el-descriptions-item>
                                            <el-descriptions-item label="企客客户" width="100" label-align="right">{{ custInfo.num4 }}</el-descriptions-item>
                                            <el-descriptions-item label="重客客户" width="100" label-align="right">{{ custInfo.num5 }}</el-descriptions-item>
                                            <el-descriptions-item label="团车客户" width="100" label-align="right">{{ custInfo.num6 }}</el-descriptions-item>
                                        </el-descriptions>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-descriptions title="图例说明" :column="1" label-align="right" :border="true">
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <svg-icon icon-class="tag_1" />
                                                </template>
                                                <span>启信宝认证企业</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <svg-icon icon-class="tag_2" />
                                                </template>
                                                <span>存在累计保费</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <svg-icon icon-class="tag_3" />
                                                </template>
                                                <span>当前存在有效保单</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <span class="tagIcon" style="background: #fce3b4;"></span>
                                                </template>
                                                <span>业务归属标签：重客</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <span class="tagIcon" style="background: #b7d883;"></span>
                                                </template>
                                                <span>业务归属标签：企客</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <span class="tagIcon" style="background: #c8e2fc;"></span>
                                                </template>
                                                <span>业务归属标签：三航</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <svg-icon icon-class="tag_8" />
                                                </template>
                                                <span>业务归属标签：团车</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <svg-icon icon-class="tag_9" />
                                                </template>
                                                <span>本年新增/变更至</span>
                                            </el-descriptions-item>
                                            <el-descriptions-item label-align="right">
                                                <template #label>
                                                    <svg-icon icon-class="tag_11" />
                                                </template>
                                                <span>处于变更过程的节点</span>
                                            </el-descriptions-item>
                                        </el-descriptions>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="合作关系" name="2">
                <p class="title_2">关联关系表</p>
                <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="客户名称" align="center" prop="custName" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="证件号码类型" align="center" prop="certType" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="证件号码" align="center" prop="certNo" :show-overflow-tooltip="true" />
                    <el-table-column label="业务归属" align="center" prop="affiliation" min-width="120"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="客户类别" align="center" prop="custType" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="所在省" align="center" prop="province" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="关联关系类型" align="center" prop="glgxlx" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="主合作平台方" align="center" prop="zhzptf" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="关系建立时间" align="center" prop="cretTime" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="当前关系状态" align="center" prop="dqgxzt" min-width="150"
                        :show-overflow-tooltip="true" />
                </el-table>
                <div class="tab2-btnBox">
                    <el-button type="primary" class="cancel">批量取消合作关系</el-button>
                    <el-button type="success">新增合作关系</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="其他关联关系" name="3">
                <p class="title_2">关联关系表</p>
                <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="客户名称" align="center" prop="custName" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="证件号码类型" align="center" prop="certType" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="证件号码" align="center" prop="certNo" :show-overflow-tooltip="true" />
                    <el-table-column label="业务归属" align="center" prop="affiliation" min-width="120"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="客户类别" align="center" prop="custType" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="所在省" align="center" prop="province" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="关联关系类型" align="center" prop="glgxlx" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="主合作平台方" align="center" prop="zhzptf" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="关系建立时间" align="center" prop="cretTime" min-width="150"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="当前关系状态" align="center" prop="dqgxzt" min-width="150"
                        :show-overflow-tooltip="true" />
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- 股东信息 -->
        <el-dialog v-model="visible" title="股东信息" width="70%" append-to-body>
            <el-table :data="shareholderInformation">
                <el-table-column label="股东名称" align="center" prop="gdmc" min-width="150"
                    :show-overflow-tooltip="true" />
                <el-table-column label="状态" align="center" prop="gdzt" min-width="100" :show-overflow-tooltip="true" />
                <el-table-column label="股东类型" align="center" prop="gdlx" min-width="110"
                    :show-overflow-tooltip="true" />
                <el-table-column label="股东出资比例" align="center" prop="gdczbl" min-width="90"
                    :show-overflow-tooltip="true" />
                <el-table-column label="证件类型" align="center" prop="zjlx" min-width="100"
                    :show-overflow-tooltip="true" />
                <el-table-column label="股东总认缴" align="center" prop="gdrj" min-width="100"
                    :show-overflow-tooltip="true" />
                <el-table-column label="股东总实缴" align="center" prop="gdsj" min-width="100"
                    :show-overflow-tooltip="true" />
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup name="RelatedRelation">
import TreeShareholderEquity from "../components/TreeShareholderEquity"

import { reactive, ref } from "vue"

const dateValue = ref('')
const certTypeOption = [
    {label: '统一社会信用代码', value: '1'}
]
const queryRef = ref(null)
const queryParams = reactive({
    custName: '苏州市轨道交通集团有限公司',
    certType: '1',
    certNo: '365457456256375673',
})
const rules = {
    custName: [{ required: true, message: "请输入", trigger: "blur" }],
    certType: [{ required: true, message: "请选择", trigger: "change" }],
    certNo: [{ required: true, message: "请输入", trigger: "blur" }],
}
function handleQuery(){
}
const activeTab = ref('1')
const custInfo = reactive({
    custName: '中国建筑工程有限公司',
    certType: '统一社会信用代码',
    certNo: '9123456789012321',
    updateTime: '2024.01.01',
    orgNo: '2312231232',
    regNo: '31092389099089',
    otherNo: '1231231239090',
    city: '上海市徐汇区',
    address: '上海市徐汇区',
    operName: '张三',
    type: '股权有限公司',
    industryAll: '建筑业/房屋建筑',
    industryOne: '建筑业',
    industryTwo: '房屋建筑',
    oneOrgName: '中国建筑工程有限公司',
    topOrgName: '中国建筑工程有限公司',
    clientName: '中国建筑工程有限公司',
    section: '大型商业客户一处',
    vipCode: 'VIP000000000121',
    branchName: '上海分公司',
    flag: '存量客户',
    qxAuth: '是',
    attributionHierarchy: '重客一级',
    oneCustName: '中国建筑工程有限公司',
    khgllx: '总对总客户',
    qtjg: '上海分公司',
    tbdm: '080801',
    jydq: '上海、北京、广州、黑龙江...',
    ldjg: '上海分公司、北京分公司',
    clsyxzsyx: '城市公交、租赁车、出租车...',
    clsyxzjqx: '企业用车、出租租赁用车...',
    zlzlsyx: '6座以下客车、特种车一...',
    zlzljqx: '6座以下客车、特种车一...',
    customerAbbreviation: '中国建工',
    historicalName: '中国建筑工程有限公司',
    orgType: '法人企业',
    status: '存续(在营、开业、在册)',
    mainUnit: '上海市工商局',
    establishTime: '2000-01-01',
    operatingTerm: '2030-01-01',
    dateApproval: '2024-01-01',
    typeLegalPerson: '企业法人',
    registrationAuth: '上海市市场监督管理局',
    NumEmployees: '200',
    registeredCapital: '5000万',
    legalRepresentative: '王XX',
    legalRepresentativeType: '个人',
    companyRepresentativePosition: '法定代表人',
    address: '上海市XX区XX路XX号',
    businessScope: '电分工程、环经工程、智能化工程、桥梁及隧道工程、园林绿化工程施工、建筑劳务分',
    topShareholding: '51%',
    equityHierarchy: '四级',
    num1: '6',
    num2: '11',
    num3: '0',
    num4: '1',
    num5: '2',
    num6: '3',
})
// 关联关系表
const visible = ref(false)
const shareholderInformation = reactive([
    {gdmc: '武汉市工业园区国有投资者', gdzt: '有效', gdlx: '企业法人', gdczbl: '23.22%', zjlx: '身份证', gdrj: '2323242.00', gdsj: '443414.99'}
])
const loading = ref(false)
const tableList = reactive([
    {
    label: [1,2],
    custName: '中国建筑工程有限公司',
    custType: '独立主体',
    certType: '统一社会信用代码',
    certNo: 'XXXXXXXXXXXXXX',
    P02Code: 'XXXXXXXXXXX',
    affiliation: '团客，重客',
    jyzt: '存续',
    province: '湖北省',
    area: '武汉市',
    city: '江岸区',
    glgxlx: '合作关系',
    zhzptf: '上海XX建筑工程有限公司',
    cretTime: '2019.12.21',
    dqgxzt: '有效',
    sections: '企业客户部',
    industryOne: '建筑业',
    industryTwo: '房屋建筑业',
    industryThree: '住宅房屋建筑',
    industryFour: '住宅房屋建筑',
    guimo: '国内500强',
    hangye: '建筑工程客户',
    isFocus: true,
    },
    {
    label: [3,4],
    custName: '中国建筑工程有限公司',
    custType: '独立主体',
    certType: '统一社会信用代码',
    certNo: 'XXXXXXXXXXXXXX',
    P02Code: 'XXXXXXXXXXX',
    affiliation: '团客，重客',
    jyzt: '存续',
    province: '湖北省',
    area: '武汉市',
    city: '江岸区',
    glgxlx: '合作关系',
    zhzptf: '上海XX建筑工程有限公司',
    cretTime: '2019.12.21',
    dqgxzt: '有效',
    sections: '企业客户部',
    industryOne: '建筑业',
    industryTwo: '房屋建筑业',
    industryThree: '住宅房屋建筑',
    industryFour: '住宅房屋建筑',
    guimo: '国内500强',
    hangye: '建筑工程客户',
    isFocus: true,
    },
    {
    label: [1,2,3,4],
    custName: '中国建筑工程有限公司',
    custType: '独立主体',
    certType: '统一社会信用代码',
    certNo: 'XXXXXXXXXXXXXX',
    P02Code: 'XXXXXXXXXXX',
    affiliation: '团客，重客',
    jyzt: '存续',
    province: '湖北省',
    area: '武汉市',
    city: '江岸区',
    glgxlx: '合作关系',
    zhzptf: '上海XX建筑工程有限公司',
    cretTime: '2019.12.21',
    dqgxzt: '有效',
    sections: '企业客户部',
    industryOne: '建筑业',
    industryTwo: '房屋建筑业',
    industryThree: '住宅房屋建筑',
    industryFour: '住宅房屋建筑',
    guimo: '国内500强',
    hangye: '建筑工程客户',
    isFocus: true,
    },
])
const handleSelectionChange = ()=> {

}

</script>

<style lang="scss" scoped>
:deep(.el-tabs__content){
    padding: 0;
    .el-tab-pane{
        padding: 15px;
    }
}
.tab1{
    position: relative;
    .datePicker{
        position: absolute;
        top: 10px;
        left: 40%;
    }
    .tagIcon {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 2px;
    }
}
.tab2-btnBox{
    padding-top: 10px;
    position: relative;
    text-align: center;
    .cancel{
        position: absolute;
        left: 0;
    }
}
</style>